<template>
  <view class="customer-detail-page">
    <!-- 头部导航 -->

      <!-- 客户基本信息 -->
      <view class="info-card">
        <view class="card-header">
          <text class="card-title">客户信息</text>
        </view>
        <view class="card-body">
          <view class="info-row">
            <text class="info-label">姓名</text>
            <text class="info-value">{{ customerInfo.customerName || '--' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">手机号</text>
            <text class="info-value">{{ formatPhone(customerInfo.phone) || '--' }}</text>
            <view class="action-buttons">
              <view class="action-btn" @click="makeCall">
                <uni-icons type="phone" size="16" color="#007AFF"></uni-icons>
                <text>拨打</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 中介信息 -->
     <view class="info-card" v-if="customerInfo.zhongjieYWYName">
        <view class="card-header">
          <text class="card-title">业务员</text>
        </view>
        <view class="card-body">
          <view class="info-row">
            <text class="info-label">业务员</text>
            <text class="info-value">{{ customerInfo.zhongjieYWYName || '--' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">联系电话</text>
            <text class="info-value">{{ formatPhone(customerInfo.zhongjieYWYPhone) || '--' }}</text>
            <view class="action-buttons">
              <view class="action-btn" @click="makeCallToAgent">
                <uni-icons type="phone" size="16" color="#007AFF"></uni-icons>
                <text>拨打</text>
              </view>
            </view>
          </view>
          <view class="info-row">
            <text class="info-label">所属门店</text>
            <text class="info-value">{{ customerInfo.zhongjieYWYShop || '--' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">有效期</text>
            <text class="info-value protection-period">
              {{ $formatTime(customerInfo.expireTime)}}
            </text>
          </view>
        </view>
      </view>
	
		<view class="info-card" v-if="customerInfo!='cancel'">
		    <view class="card-header">
				<text class="card-title">阶段</text>
		    </view>
			<view class="card-body-p">
				<uni-steps :options="list1" :active="active" active-color="#3F88FF" />
			</view>
		  </view>
      <!-- 购房意向 -->
      <view class="info-card" >
        <view class="card-header">
          <text class="card-title">历史报备</text>
        </view>
        <view class="card-body">
			<uni-list>
				<uni-list-item v-for="item in list" :title="$formatTime(item.eventTime)" :key="item._id" :note="item.eventDescription"></uni-list-item>
				<!-- <uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item> -->
			</uni-list>
        </view>
      </view>

      <!-- 跟进阶段 -->
   
  </view>
</template>

<!-- // 阶段, 到访，认购，签约，无效 -->

<script>
export default {
  data() {
    return {
      customerId: '',
      customerInfo: {
        customerName: '',
        phone: '',
        source: '',
        createTime: '',
        agentName: '',
        agentPhone: '',
        agentShop: '',
        protectionPeriod: {
          start: '',
          end: '',
          isValid: true
        },
        intention: {
          budget: '',
          houseType: '',
          area: '',
          region: '',
          specialNeeds: ''
        },
        currentStage: 'reported',
        stageHistory: [],
        remark: ''
      },
	  shopCustomer:{},
	  active:0,
	  list:[],
	  list1:[{
		  title: '录入'
	  },{
		  title: '到访'
	  },{
		   title: '认购'
	  },{
		   title: '签约'
	  }]
    }
  },

  onLoad(options) {
    if (options.id) {
      this.customerId = options.id
      this.loadCustomerDetail()
	  this.getHistory()
    } else {
      uni.showToast({
        title: '客户信息不存在',
        icon: 'none'
      })
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  },

  methods: {
    // 加载客户详情
    async loadCustomerDetail() {
      try {
        uni.showLoading({ title: '加载中...' })
        
        // 这里调用实际的接口
        const res = await this.$cloudOBjAjax('middleman-advisor-customers', 'getCustomerById', {
          id: this.customerId
        })
        
        this.customerInfo = { ...this.customerInfo,...res }
		
		
		
		if(this.customerInfo.bindCustomId){
			//说明意见绑定成功可以获取售房部客户信息
			this.active = 1
			this.getShopCustomer(this.customerInfo.bindCustomId)
		} 
      } catch (error) {
        console.error('加载客户详情失败:', error)
        // 开发环境使用模拟数据
      } finally {
        uni.hideLoading()
      }
    },

	getShopCustomer(id){
		this.$cloudOBjAjax('suuny-custom','getCustomerById',{id:id}).then(res=>{
			this.shopCustomer = res
			if(res.status == 14 ){
				this.active = 2
			}else if(res.status == 15){
				this.active = 3
			}
		})
	},
    // 格式化手机号
    formatPhone(phone) {
      if (!phone) return ''
      return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
    },

    // 格式化时间
    formatTime(timestamp) {
      if (!timestamp) return ''
      const date = new Date(timestamp)
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
    },

    // 获取客户来源文本
    getSourceText(source) {
      const option = this.sourceOptions.find(opt => opt.value === source)
      return option ? option.label : '未知来源'
    },
	async getHistory(){
		const res = await this.$cloudOBjAjax('customer-lifecycle-history', 'getAgentLifecycle', {
			customerId: this.customerId,
			getAll: true
		})
		this.list = res.list 
		console.log(res)
	},

    // 获取保护期状态
    getProtectionPeriodClass() {
      if (!this.customerInfo.protectionPeriod) return 'invalid'
      return this.customerInfo.protectionPeriod.isValid ? 'valid' : 'invalid'
    },

    // 获取保护期文本
    getProtectionPeriodText() {
      const protection = this.customerInfo.protectionPeriod
      if (!protection || !protection.start) return '无保护期'
      
      if (protection.isValid) {
        return `保护期至 ${this.formatTime(protection.end)}`
      } else {
        return '保护期已过期'
      }
    },

    // 拨打电话给客户
    makeCall() {
      if (!this.customerInfo.phone) {
        uni.showToast({
          title: '暂无客户电话',
          icon: 'none'
        })
        return
      }
      
      uni.makePhoneCall({
        phoneNumber: this.customerInfo.phone
      })
    },

    // 拨打电话给中介
    makeCallToAgent() {
      if (!this.customerInfo.zhongjieYWYPhone) {
        uni.showToast({
          title: '暂无中介电话',
          icon: 'none'
        })
        return
      }
      
      uni.makePhoneCall({
        phoneNumber: this.customerInfo.zhongjieYWYPhone
      })
    },

    // 删除客户
    deleteCustomer() {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个客户吗？此操作不可恢复。',
        success: (res) => {
          if (res.confirm) {
            this.confirmDelete()
          }
        }
      })
    },

    // 确认删除
    async confirmDelete() {
      try {
        uni.showLoading({ title: '删除中...' })
        
        await this.$cloudOBjAjax('middleman-advisor-customers', 'deleteCustomer', {
          customerId: this.customerId
        })
        
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        })
        
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (error) {
        console.error('删除客户失败:', error)
        uni.showToast({
          title: '删除失败',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.customer-detail-page {
  background-color: #f8f8f8;
  min-height: 100%;
  padding: 20rpx;
}

/* 信息卡片 */
.info-card {
  background: white;
  margin: 20rpx 0rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
}

.card-header {
  padding: 24rpx 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.card-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.card-body {
  padding: 0 30rpx;
}

.card-body-p {
	 padding: 30rpx;
}

.info-row {
  display: flex;
  align-items: center;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f8f8f8;
  
  &:last-child {
    border-bottom: none;
  }
  
  &.full-width {
    flex-direction: column;
    align-items: flex-start;
    
    .info-value {
      margin-top: 16rpx;
      width: 100%;
    }
  }
}

.info-label {
  font-size: 26rpx;
  color: #666;
  width: 160rpx;
  flex-shrink: 0;
}

.info-value {
  font-size: 26rpx;
  color: #333;
  flex: 1;
}

.protection-period {
  &.valid {
    color: #52c41a;
  }
  
  &.invalid {
    color: #ff4d4f;
  }
}

.action-buttons {
  display: flex;
  align-items: center;
}

.action-btn {
  display: flex;
  align-items: center;
  padding: 8rpx 16rpx;
  background: #f0f7ff;
  border-radius: 8rpx;
  color: #007AFF;
  font-size: 24rpx;
  
  text {
    margin-left: 8rpx;
  }
}

/* 阶段进度 */
.stage-progress {
  padding: 30rpx 0;
}

.progress-bar {
  height: 8rpx;
  background: #f0f0f0;
  border-radius: 4rpx;
  margin: 0 60rpx;
  position: relative;
}

.progress-fill {
  height: 100%;
  background: #1890ff;
  border-radius: 4rpx;
  transition: width 0.3s ease;
}

.stage-points {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
}

.stage-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 1;
  
  &.completed {
    .point-icon {
      background: #52c41a;
      border-color: #52c41a;
    }
    
    .point-text {
      color: #52c41a;
      font-weight: 500;
    }
  }
  
  &.current {
    .point-icon {
      background: #1890ff;
      border-color: #1890ff;
    }
    
    .point-text {
      color: #1890ff;
      font-weight: 600;
    }
  }
  
  &.future {
    .point-icon {
      background: #f0f0f0;
      border-color: #d9d9d9;
    }
    
    .point-text {
      color: #999;
    }
  }
}

.point-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4rpx solid;
  margin-bottom: 16rpx;
}

.point-text {
  font-size: 24rpx;
  margin-bottom: 8rpx;
}

.point-time {
  font-size: 20rpx;
  color: #999;
}

/* 当前阶段 */
.current-stage {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-top: 1rpx solid #f0f0f0;
}

.stage-badge {
  padding: 12rpx 24rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
  color: white;
  margin-right: 20rpx;
  
  &.stage-reported {
    background: #1890ff;
  }
  
  &.stage-visited {
    background: #52c41a;
  }
  
  &.stage-subscribed {
    background: #faad14;
  }
  
  &.stage-signed {
    background: #722ed1;
  }
}

.stage-desc {
  font-size: 26rpx;
  color: #666;
  flex: 1;
}

/* 时间线 */
.stage-timeline {
  padding-top: 30rpx;
  border-top: 1rpx solid #f0f0f0;
}

.timeline-title {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 20rpx;
}

.timeline-list {
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    left: 15rpx;
    top: 0;
    bottom: 0;
    width: 2rpx;
    background: #f0f0f0;
  }
}

.timeline-item {
  display: flex;
  margin-bottom: 30rpx;
  position: relative;
}

.timeline-dot {
  width: 32rpx;
  height: 32rpx;
  border-radius: 50%;
  background: #1890ff;
  margin-right: 30rpx;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.timeline-content {
  flex: 1;
  padding-bottom: 20rpx;
}

.timeline-stage {
  display: block;
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 8rpx;
}

.timeline-time,
.timeline-operator,
.timeline-remark {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 4rpx;
}

/* 备注文本 */
.remark-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
  padding: 20rpx 0;
}

/* 底部操作栏 */
.action-bar {
  background: white;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
  position: sticky;
  bottom: 0;
}

.action-buttons {
  display: flex;
  gap: 20rpx;
}

.btn {
  flex: 1;
  height: 80rpx;
  border-radius: 12rpx;
  font-size: 28rpx;
  font-weight: 500;
  border: none;
  
  &.btn-secondary {
    background: #f8f9fa;
    color: #333;
    border: 1rpx solid #e9ecef;
  }
  
  &.btn-primary {
    background: #1890ff;
    color: white;
  }
}

/* 弹窗样式 */
.stage-popup {
  background: white;
  border-radius: 16rpx;
  width: 600rpx;
  max-width: 90vw;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.popup-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.popup-content {
  padding: 30rpx;
}

.stage-info {
  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
  
  .info-label {
    width: 120rpx;
    font-size: 26rpx;
    color: #666;
  }
  
  .info-value {
    font-size: 26rpx;
    color: #333;
    
    &.status-completed {
      color: #52c41a;
    }
    
    &.status-current {
      color: #1890ff;
    }
    
    &.status-future {
      color: #999;
    }
  }
}

/* 操作菜单 */
.action-sheet {
  background: white;
  border-radius: 24rpx 24rpx 0 0;
  padding-bottom: env(safe-area-inset-bottom);
}

.action-item {
  display: flex;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
  
  text {
    margin-left: 20rpx;
    font-size: 28rpx;
    color: #333;
  }
  
  &.delete {
    border-bottom: none;
  }
}

.action-cancel {
  text-align: center;
  padding: 30rpx;
  font-size: 28rpx;
  color: #666;
  background: #f8f9fa;
  margin-top: 10rpx;
}
</style>